<template>
  <div class="container">
    <van-tabs :active="tab_index" sticky animated @change="onTabClick">
      <van-tab title="可用"/>
      <van-tab title="已过期"/>
      <van-tab title="已使用"/>
    </van-tabs>
    <div class="red-gift" v-for="item in list" :key="item.id">
           <div class="price">￥
        <span>{{item.value}}</span>
      </div>
      <div class="msg">
        <p class="title">{{item.name}}</p>
         <div class="info" v-if="item.minimum_limit_value">满{{item.minimum_limit_value}}元可用</div>
          <div class="info" v-if="item.product_ids">限部分商品可用</div>
          <div class="info" v-if="item.black_list_product_ids">部分商品不可用</div>
          <div class="info" v-if="item.is_proprietary_limit">限自营商品可用</div>
      </div>
      <div
        class="time-line"
        v-if="item.started_at&&item.ended_at"
      >有效期:{{item.started_at}}至{{item.ended_at}}</div>
    </div>
    <page-footer/>
    <van-toast id="van-toast"/>
  </div>
</template>
<script>
import * as RedPacketAction from '@/api/red-packet'
import Toast from 'vant-weapp/dist/toast/toast'
import * as Utils from '@/utils'
export default {
  data () {
    return {
      list: [],
      start: 0,
      tab_index: 0,
      status: 1,
      expired: 'not'
    }
  },
  methods: {
    transOrderStatus (status) {
      return Utils.transOrderStatus(status)
    },
    onTabClick (event) {
      this.tab_index = event.mp.detail.index
      this.start = 0
      this.list = []
      switch (this.tab_index) {
        case 0:
          this.status = 1
          this.expired = 'not'
          break
        case 1:
          this.status = 1
          this.expired = 'is'
          break
        case 2:
          this.status = 2
          this.expired = ''
          break
      }
      this.fetchRedPackets()
    },
    fetchRedPackets () {
      let params = {
        start: this.start,
        status: this.status,
        expired: this.expired
      }
      RedPacketAction.list(params)
        .then(data => {
          if (data.length > 0) {
            data.forEach(item => {
              this.start = item.id
              this.list.push(item)
            })
          }
          wx.hideNavigationBarLoading()
        })
        .catch(err => Toast(err.msg))
    }
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.fetchRedPackets()
    wx.stopPullDownRefresh()
  },
  onLoad () {
    this.start = 0
    this.list = []
    this.expired = 'not'
    this.fetchRedPackets()
  }
}
</script>
<style lang="less" scoped>
.container {
  background: #f8f8f8;
  min-height: 1200rpx;
  position: relative;
  padding-bottom: 80px;
  .red-gift {
    background: #ffffff;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
    padding: 20rpx;
    margin-top: 20rpx;
    .price {
      width: 24%;
      color: #f03;
      font-size: 40rpx;
      text-align: center;
      span {
        margin: 10rpx auto;
        text-align: center;
        font-size: 42rpx;
        line-height: 95rpx;
      }
    }
    .msg {
      flex: 1;
      .title {
        font-size: 16px;
        font-weight: 700;
        color: #333;
      }
      .info {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .time-line {
    background: #eee;
    padding: 5px;
    width: 100%;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
  }
  ._van-card {
    .van-card.van-card {
      .van-card__thumb {
        left: 0;
      }
    }
  }
}
</style>


